<template>
  <div class="per">
    <h2>权限</h2>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      ref="tree"
      :default-expanded-keys="user.roles"
      :default-checked-keys="user.roles"
      :props="defaultProps"
      :check-on-click-node="true"
      @getCurrentKey="getCurrentKey"
      >
    </el-tree>
    <el-button @click="save">保存</el-button>
    <el-button @click="toAbout">跳转关于</el-button>

  </div>
</template>

<script setup>
import {resetAsyncRouter,addAsyncRouter } from '@/router'
import {ref,computed} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
const router = useRouter()
const store = useStore()
// 数据
const user = computed(() => store.getters.user)
const data = [{
            label: '权限管理',
            id:'1', //有children的id与权限无关
            children: [{
              id: '210',
              label: '权限列表',
            },{
              id: '220',
              label: '添加权限',
            }]
          }, {
            label: '路由嵌套',
            id:'2',
            children: [{
              id: '310',
              label: '菜单一'
            }, {
              id: '320',
              label: '菜单二'
            }, {
              label: '菜单三',
              id:'3',
              children: [{
                id: '331',
                label: '菜单3-1'
              }, {
                id: '332',
                label: '菜单3-2'
              }]
            }]
          }, {
            id: '500',
            label: '关于',
}]
const defaultProps = {
  children: 'children',
  label: 'label'
}

// 获取选中项key
const tree = ref()
function getCurrentKey(){
  console.log(tree.value.getCheckedKeys())
  return tree.value.getCheckedKeys()
}
// 保存
async function save(){
  // RRouter()  //v4没用了
  resetAsyncRouter()  // 清除动态路由
  let roles = getCurrentKey()
  // 修改权限，修改导航栏
  store.dispatch('setUserInfo',roles)
  const accessRoutes = await store.dispatch('permission/GenerateRoutes', roles)
  addAsyncRouter(accessRoutes)  // 添加动态路由
}
// 跳转/about
function toAbout(){
  router.push('/about')
}
</script>

<style lang="scss" scoped>
</style>